import React from "react";
import styles from './index.less';
import { Modal, InputItem, Picker, Pagination, Icon, List, Radio } from 'antd-mobile';
import ReactDOM from 'react-dom';
import UserServices from '@/services/user';
import { requestSuccess, addHidden, removeHidden } from '@/utils/tools';
const RadioItem = Radio.RadioItem;
// 直接返回值

class seModal extends React.Component {
  constructor(props) {
    super(props);
    console.log(props.defaultKeyword);
    this.state = {
      visible: true,
      content: props.content,
      success: props.success,
      cancel: props.cancel,
      keyword: props.defaultKeyword || '',
      orgList: [],
      activeOrg: '',
      employees: [],
      employeesTotal: 0,
      employeesIndex: 0,
      activeEmpolyee: ''
    };
    window.cordovaBackEvents.push(() => {
      this.handleCancel();
    });
  }

  componentDidMount(){
    addHidden();
    // UserServices.getOrgs().then(res => {
    //   console.log(res);
    //   if(requestSuccess(res)){
    //     const list = global._.map(res.data.orgList, (item) => {
    //       return {
    //         label: item.orgDesc,
    //         value: item.orgId
    //       }
    //     })
    //     this.setState({
    //       orgList: list
    //     })
    //   }
    // })
  }

  handleSuccess = (e) => {
    removeHidden();
    this.setState({
      visible: false,
    });
    this.state.success && this.state.success({
      employees: this.state.activeEmpolyee
    });
  }

  handleCancel = (e) => {
    this.setState({
      visible: false,
    }, () => {
      removeHidden();
    });
    this.state.cancel && this.state.cancel();
  }

  handleSelectedWbs = () => {

  }

  handleSearch = () => {
    this.handleGetEmployees();
  }

  handleGetEmployees = (index = 0, size =10) => {
    UserServices.getSearchEmployee({
      keyword: this.state.keyword || '',
      orgId: this.state.activeOrg,
      index: index * size,
      size
    }).then(res => {
      console.log(res);
      if(requestSuccess(res)){
        const result = res.data.paginationSupport;
        this.setState({
          employees: result.items,
          employeesTotal: Math.floor(result.totalCount/size) + 1,
          employeesIndex: Math.floor(result.startIndex/size) + 1
        })
      }
    })
  }

  handleOnChangeOrg = (list, b) => {
    this.setState({
      activeOrg: list[0]
    })
  }

  handleKeywordChange = (value) => {
    this.setState({
      keyword: value,
    });
  }

  handlePageChange = (index) => {
    this.handleGetEmployees(index - 1);
  }

  handleSelectEmp = (value) => {
    this.setState({
      activeEmpolyee: value
    })
  }

  render() {
    return (
      <Modal
        visible={this.state.visible}
        className= {styles.seModal}
      >
      <div className={styles.modalWrapper}>
        <div className={styles.info}>Search Employee</div>
        <div className={styles.list}>
          <div className={styles.item} onClick={this.handleSelectedEmplooye}>
            <div className={styles.des}>*Key word</div>
            <div className={styles.value}>
              <InputItem
                clear
                placeholder="click input"
                value={this.state.keyword}
                onChange={this.handleKeywordChange}
              ></InputItem>
            </div>
          </div>
          {/*
            <Picker data={this.state.orgList} cols={1} onChange={this.handleOnChangeOrg}>
              <div className={styles.item} onClick={this.handleSelectedEmplooye}>
                <div className={styles.des}>Org</div>
                <div className={styles.value}>{this.state.activeOrg || 'Select'}</div>
              </div>
            </Picker>
          */}
          <div className={styles.searchBtn} onClick={this.handleSearch}>Search</div>
        </div>
        <div className={styles.results}>
          {
            this.state.employees.length > 0 ?
            <div>
            <Pagination total={this.state.employeesTotal}
              className="custom-pagination-with-icon"
              current={this.state.employeesIndex}
              onChange={this.handlePageChange}
              locale={{
                prevText: (<span className="arrow-align"><Icon type="left" />Prev</span>),
                nextText: (<span className="arrow-align">Next<Icon type="right" /></span>),
              }}
            />
            <div className={styles.labels}>
              <div className={styles.label}>Employee No</div>
              <div className={styles.label}>Chinese Name</div>
              <div className={`${styles.selected}`}>Selected</div>
            </div>
            <List>
              {
                this.state.employees.map(i => (
                  <RadioItem key={i.employeeNo} checked={this.state.activeEmpolyee === i.employeeNo} onChange={() => this.handleSelectEmp(i.employeeNo)}>
                    <div className={styles.item}>
                      <div className={styles.des}>{i.employeeNo}</div>
                      <div className={styles.des}>{i.localName}</div>
                    </div>
                  </RadioItem>
                ))
              }
            </List>
          </div>
            :
            null
          }
        </div>
        <div className={styles.footerBtns}>
          <div onClick={this.handleSuccess}>Submit</div>
          <div onClick={this.handleCancel}>Close</div>
        </div>
      </div>
      </Modal>
    );
  }
}

export default {
  open(params){
    let div = document.createElement('div');
    // div.id = 'searchEmployeeModal';
    // document.body.appendChild(div);
    ReactDOM.render(React.createElement(seModal, params), div);
  },
  close(){
    const a = document.getElementById('searchEmployeeModal');
    ReactDOM.unmountComponentAtNode(a);
  }
};
